<!-- 从业者端-我的-培训经历-->
<template>
	<view class="container">
		
		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode" :range="range"  @confirm="confirm"></u-picker>

		<!-- 表单区域 -->
		<view class="form-container">
			<u-form :model="form" ref="form">

        <!-- 培训学校 -->
				<u-field v-model="form.schoolName" label="培训学校" label-width="160" prop="schoolName" placeholder="请输入培训学校"
					:placeholder-style="placeholderStyle" >
				</u-field>				
				
				<!-- 专业 -->
				</u-form-item>
				<u-field v-model="form.marjor" label="专业" label-width="160" prop="marjor" placeholder="请输入专业名称"
					:placeholder-style="placeholderStyle" >
				</u-field>
				
				<!-- 培训时间 -->
	<!-- 			<u-field v-model="form.starTime" label="培训时间" label-width="160"  placeholder="请选择培训时间"
					:placeholder-style="placeholderStyle" @click="isShowPicker('starTime')">
				</u-field>	 -->
				<view class="form-section">
					<u-form-item label="培训时间" prop="startDate" label-width="160">
						<u-input v-model="form.starTime" placeholder="培训时间" clearable @click="isShowPicker('starTime')" :focus="false"  disabled/>
					</u-form-item>
				</view>
				
				<!-- 结业证书 -->
				<view class="form-item">
					<view class="">
						<text class="label">结业证书</text>
					</view>
					<view class="">
						<u-upload
						  :action ="action"
						  :fileList="form.photoList"
							@on-list-change="onchange"
						  @on-remove="(e) => deletePic(e, index)"
						  name="certPhoto"
						  multiple
						  :maxCount="1"
						  width="160"
						  height="160"
							:auto-upload="false"
							:show-progress="false"
							
						>
						  <image
						    v-if="form.photoList.length === 0"
						    src="/static/images/upload-placeholder.png"
						    class="upload-placeholder"
						  ></image>
						</u-upload>
					</view>	  
				</view>
			</u-form>

			<!-- 按钮组 -->
			<view class="button-group">
				<u-button type="default" @click="handleSubmit" shape="circle" plan :loading="loading">
					删除
				</u-button>
				<u-button type="default" @click="handleSubmit" :custom-style="btuStyle"  shape="circle" :loading="loading">
					保存
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				action: '#',
				//按钮统一色彩
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
					marginRight: '20rpx',
				},
				loading: false,
				clearable: false,
				// 弹出窗口内容
				show: false,
				mode: "selector",
				range: ['大专', '本科', '硕士', '硕士以上'],
				NumberValue: 0,
				// field控件的样式
				placeholderStyle: "color:#bcbcbc",
				required: true,
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx'
				},

				form: {
					trainCode: '', ///培训code
					schoolName: '', //学校
					marjor: '', //专业
					starTime: '', ///入学时间
					photoList: []  ,///证书照片					
				},
				photoListId: '', // 证书照片ID
				currentCount: 0,
				maxCount: 1000,
			}
		},		
		onLoad(option) {
			const pxcode = option.code
			this.form.trainCode = pxcode
		
		},
		onShow() {
			if(this.form.trainCode && this.photoListId=='') {
				this.$u.api.queryjlpx({
					jlpxcode: this.form.trainCode
				}).then(res => {
					console.log('某个：', res)
					const base_info = res.data.base_info
					this.form.trainCode = base_info.jlpx_code
					this.form.schoolName = base_info.jlpx_school
					this.form.marjor = base_info.jlpx_zhuanye
					this.form.starTime = base_info.jlpx_traindate
					this.form.photoList = []
					this.form.photoList = [{
						imguri:base_info.jlpx_trimg_uri[0].imguri,
						url: base_info.jlpx_trimg_uri[0].url
					}]
					this.photoListId = this.form.photoList[0].imguri
					
					console.log('onshow-train:',this.form)
					
				})
			}
		},
		methods: {
			// 显示弹窗
			isShowPicker(value) {				
				if (value == 'education') {
					this.NumberValue = value;
					this.mode = "selector";
					this.range = ['大专', '本科', '硕士', '硕士以上'];
					this.defaultSelector = [0];
				} else {
					this.NumberValue = value;
					this.mode = "time"
					// this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']];
					// this.defaultSelector = [0, 0, 0];
				}
				this.show = true
			},

			// 计算介绍内字数
			handleInput() {
				// 计算当前字数（考虑中文和符号）
				this.currentCount = this.introduction.length

				// 如果超过最大字数，截取前1000个字符
				if (this.currentCount > this.maxCount) {
					this.introduction = this.introduction.substring(0, this.maxCount)
					this.currentCount = this.maxCount
				}
			},

			// 选择确认
			confirm(e) {
				if (this.NumberValue == 'starTime') {
					this.form.starTime = e.year+'-'+e.month+'-'+e.day;
				} else if(this.NumberValue == 'endTime') {
					// this.form.businessAddress = e.province.label + '-' + e.city.label + '-' + e.area.label;
					this.form.endTime = e.year+'-'+e.month+'-'+e.day;
				} else {
					this.form.education = this.range[e[0]]
				}
			},
			
			// 图片上传
			afterRead(event, index) {
			  const { file } = event
			  // 这里模拟上传过程，实际项目中应调用上传API
			  this.certificates[index].photoList.push({
			    url: file.url,
			    status: 'uploading',
			    message: '上传中...'
			  })
			  
			  // 模拟上传完成
			  setTimeout(() => {
			    this.certificates[index].photoList[0].status = 'success'
			    this.certificates[index].photoList[0].message = ''
			  }, 1500)
			},
			
			// 删除图片
			deletePic(event, index) {
			  this.form.photoList.splice(event, 1)
				// this.form.photoListId.splice(event, 1)
			},
			
			
			// 当图片变化时
			onchange(list,name) {
				if(this.form.photoList.length == 0) {
					console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						// this.certificates.photoList = []
						// this.certificates[name].photoList = file.url
						this.form.photoList = [...this.form.photoList, ...newFiles];
						// console.log("onchange-2:", this.licenseFiles, list[0].url)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(name)
						})						
					}
				}
	
			},
			
			// 上传Base64数据到服务器
			uploadBase64(index) {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}	
				uni.showLoading({
					title: '上传中...'
				})		
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('wxcode'),
					"rescode": this.base64Data,
					"restype": "0",
					"resdesc": "上传照片"
				}).then(res => {
					// console.log('uploadres:', res)
					this.photoListId = res.data.base_info
				})
			},


			// 上一步
			handlePrev() {
				// uni.navigateBack();
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/personMesume'
				});		
			},

			// 提交
			handleSubmit() {
				if(!this.form.schoolName || !this.form.marjor || !this.form.starTime){
					uni.showToast({
					  title: `请完善培训信息`,
					  icon: 'none'
					})					
				} else if(!this.form.trainCode) {
					this.$u.api.createjlpx({
						"usercode": uni.getStorageSync('usercode'),
						"jlpxschool": this.form.schoolName,
						"jlpxzhuanye": this.form.marjor,
						"jlpxtraindate": this.form.starTime,
						"jlpxtrimguri": this.photoListId
					}).then(res => {
						console.log('培训：', res)
						uni.navigateTo({
							url: '/pages/Practitioner/personMesume/personMesume'
						});						
					})
				} else {
					this.$u.api.updatejlpx({
						"jlpxcode": this.form.trainCode,
						"jlpxschool":this.form.schoolName,
						"jlpxzhuanye": this.form.marjor,
						"jlpxtraindate":this.form.starTime,	
						"jlpxtrimguri": this.photoListId
					}).then(res => {
						console.log('horon-update',res)
						uni.navigateTo({
							url: '/pages/Practitioner/personMesume/personMesume'
						});
						
					})
				}
				// form: {
				// 	schoolName: '', //学校
				// 	marjor: '', //专业
				// 	starTime: '', ///入学时间
				// 	photoList: []  ,///证书照片
				// 	phptoListId: [] // 证书照片ID
				// },
				
				
				
				
				
				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;

				// 	// if (this.doorPhotos.length === 0) {
				// 	//   return this.$u.toast('请上传门头照');
				// 	// }

				// 	this.loading = true;

				// 	// 模拟API调用
				// 	setTimeout(() => {
				// 		this.loading = false;
				// 		uni.showToast({
				// 			title: '提交成功',
				// 			icon: 'success',
				// 			complete: () => {
				// 				uni.navigateTo({
				// 					url: '/pages/register/register-finish'
				// 				});
				// 			}
				// 		});
				// 	}, 1500);
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		// min-height: 100vh;

		.required {
			color: #f56c6c;
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.introduction {
			padding: 10px 0rpx;
			background-color: #fff;

			.header {
				margin-bottom: 10rpx;
				display: flex;



				.title {
					// font-size: 36rpx;
					// font-weight: bold;
					color: #333;
				}
			}

			.textarea-container {
				position: relative;

				/deep/ .u-input__textarea {
					padding: 20rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					font-size: 28rpx;
				}

				.word-count {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 24rpx;
					color: #999;
					background-color: rgba(245, 245, 245, 0.7);
					padding: 0 10rpx;
					border-radius: 4rpx;
				}
			}
		}


		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			/deep/ .u-field {
				padding: 10px 0;
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 4rpx;
				}
			}	

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 100px;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
					margin-left: 15rpx;
				}

				.u-btn {
					flex: 1;
				}
			}
			
			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>